{extend name="public:base" /}

{block name="css"}
<link href="/static/laydate/theme/default/laydate.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h3>订单总金额：{$all_pay_price}元</h3>
                </div>

                <div class="ibox-content">
                    <div class="row search-form">
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <input placeholder="请选择开始日期" type="text" name="start_time" value="{:input('start_time')}" class="form-control form-control-lg screen-date" readonly>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <input placeholder="请选择结束日期" type="text" name="end_time" value="{:input('end_time')}" class="form-control form-control-lg screen-date" readonly>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <button type="button" class="btn btn-primary btn-lg screen-btn">搜索</button>
                            </div>
                        </div>
                    </div>

                    <div id="main" style="width: 100%; height:600px;">

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


{/block}

{block name="js"}
<script src="__ADMIN__/js/echarts.min.js"></script>
<script src="/static/laydate/laydate.js"></script>

<script src="__STATIC__/jquery/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<script>
    laydate.render({
        elem: '.screen-date' //指定元素
    });

    $('#select2').select2()

    var myChart = echarts.init(document.getElementById("main"));
    var time_list = `{$time_list}` ? JSON.parse(`{$time_list}`) : [];
    var order_list = `{$order_list}` ? JSON.parse(`{$order_list}`) : [];

    var option = {
        xAxis: {
            name: '日期',
            type: 'category',
            data: time_list
        },
        yAxis: {
            name: '交易额',
            type: 'value'
        },
        series: [
            {
                data: order_list,
                type: 'line',
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ],
        tooltip: {
            type: 'cross',
            trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
            backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
            borderRadius: 8,           // 提示边框圆角，单位px，默认为4
            padding: 10,                // 提示内边距，单位px，默认各方向内边距为5，
            textStyle: {
                color: '#fff'
            },
            valueFormatter: (value) => '销售额：' + value + '元'
        },
    };

    myChart.setOption(option);
</script>{/block}